<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>管理资源</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" th:href="@{/authree/layui/css/layui.css}" media="all">
    <style>
        input {
            height: 33px;
            line-height: 33px;
            padding: 0 7px;
            border: 1px solid #ccc;
            border-radius: 2px;
            margin-bottom: -2px;
            outline: none;
        }

        input:focus {
            border-color: #009E94;
        }
    </style>
</head>
<body>
<div style="margin: 20px">
    <br><br>
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn-expand">全部展开</button>
        <button class="layui-btn" id="btn-fold">全部折叠</button>
    </div>
    &nbsp;&nbsp;
    <input id="edt-search" type="text" placeholder="输入关键字" style="width: 120px;"/>&nbsp;&nbsp;
    <button class="layui-btn" id="btn-search">&nbsp;&nbsp;搜索&nbsp;&nbsp;</button>
    <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
</div>
<!-- 操作列 -->
<script type="text/html" id="oper-col">
    <button class="layui-btn layui-btn-normal layui-btn-xs toolbar-btn" lay-event="addRights"
            shiro:hasPermission="rights_addRights">
        <i class="layui-icon">&#xe654;</i>添加
    </button>
    <button class="layui-btn layui-btn-primary layui-btn-xs toolbar-btn" lay-event="editRights"
            shiro:hasPermission="rights_editRights">
        <i class="layui-icon">&#xe642;</i>修改
    </button>
    <button class="layui-btn layui-btn-danger layui-btn-xs toolbar-btn" lay-event="deleteRights"
            shiro:hasPermission="rights_deleteRights">
        <i class="layui-icon">&#xe640;</i>删除
    </button>
</script>
<script type="text/javascript" th:src="@{/authree/layui/layui.all.js}" charset="utf-8"></script>
<!-- 获取根路径 -->
<script th:replace="fragscript :: basePath"></script>
<script type="text/javascript" th:inline="none">
    var treetableUrl = basePath + "/module/";
    var reload = false;

    function needReload() {
        reload = true;
    }

    layui.config({
        base: treetableUrl  //authtree.js所在目录
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['jquery', 'treetable', "layer"], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        var listRightsUrl = basePath + "/rights/listRights";
        var addRightsUrl = basePath + "/rights/addRights/";
        var editRightsUrl = basePath + "/rights/editRights/";
        var deleteRightsUrl = basePath + "/rights/deleteRights/";

        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'rightsId',
                treePidName: 'parentId',
                treeDefaultClose: true,
                treeLinkage: false,
                elem: '#auth-table',
                url: listRightsUrl,
                cols: [[
                    {type: 'numbers'},
                    {field: 'rightsName', title: '资源名', width: 280},
                    {field: 'rightsId', title: '#', width: 80},
                    {field: 'parentId', title: 'parentId', width: 80},
                    {field: 'rightsDescription', title: '资源描述', width: 200},
                    {field: 'perms', title: '权限标识', width: 230},
                    {templet: '#oper-col', title: '操作', width: 230}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();

        var active = {
            addRights: function (data) {
                console.log(data);
                layer.open({
                    type: 2,
                    title: "添加资源",
                    area: ['460px', '400px'],
                    content: addRightsUrl + data.rightsId,
                    end: function () {
                        if (needReload) {
                            renderTable();
                            reload = false;
                        }
                    }
                })
            },
            editRights: function (data) {
                console.log(data);
                layer.open({
                    type: 2,
                    title: "编辑资源",
                    area: ['460px', '400px'],
                    content: editRightsUrl + data.rightsId,
                    end: function () {
                        if (needReload) {
                            renderTable();
                            reload = false;
                        }
                    }
                })
            }, deleteRights: function (data) {
                console.log(data);
                layer.confirm('确认删除?', function (index) {
                    $.ajax({
                        url: deleteRightsUrl + data.rightsId,
                        type: 'delete',
                        dataType: 'json',
                        success: function (result) {
                            layer.msg(result.message);
                            if (result.code == 0) {
                                renderTable();
                            }
                        }
                    })
                    layer.close(index);
                });
            },
        }

        //监听工具条
        table.on('tool(auth-table)', function (obj) {
            var data = obj.data;
            var method = obj.event;
            active[method] ? active[method].call(this, data) : "";
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#auth-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#auth-table');
        });

        $('#btn-search').click(function () {
            var keyword = $('#edt-search').val();
            var searchCount = 0;
            $('#auth-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword != '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        treetable.expandAll('#auth-table');
                        $('html,body').stop(true);
                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword == '') {
                layer.msg("请输入搜索内容", {icon: 5});
            } else if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            }
        });
    });
</script>
</body>
</html>